<template>
  <div>
    <div class="zhuceindex-box">
        <input class="username" placeholder="请输入手机号" v-model="username" name="username">
        <!-- //is-link 左箭头 -->
        <div class="submit" @click="showPopup" >下一步</div>
        <!-- <van-cell @click="showPopup" class="submit" style="color:white;">下一步</van-cell> -->
        <van-popup v-model="show" class="taichu">
           <div class="up">{{msg}}</div>
           <ul>
            <li @click = "show = false">取消</li>
            <li style="color:orange;" @click = "leap">立即登录</li>
           </ul>
        </van-popup>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name:"zhuceoindex-vue",
  data(){
    return {
        username:"",
        show: false,
        msg:"",
    }
  },
  methods:{
    showPopup() {
        //检查改手机号是否被注册过
        axios.post("/api/user/docheckphone",`tel=${this.username}`).then(res=>{
            if(res.data.code == "10005"){
            this.msg = "该手机号已经被注册请重新登录"
            this.show = true;
            }else if(res.data.code == "200"){
                localStorage.setItem("tel",this.username)
                this.$router.push("/zhuce/code")
            }
            
        })
    },
    leap(){
        this.$router.push("/reg")
    }
  }
}
</script>

<style scoped>
.zhuceindex-box{
        height:6rem;
        background-color: #fff;
        overflow: auto;
    }
.submit{
  width: 95%;
  height: 1.75rem;
  background-color:rgba(234, 115, 115, 0.999);
  text-align: center;
  margin: 0 auto;
  line-height: 1.75rem;

  color: white;
  border-radius:1rem;
  margin-top: 1rem;
}
.username{
  display: block;
  width: 80%;
  margin: 0 auto;
  height: 2rem;
  border: none;
 border-bottom: 1px solid rgb(189, 187, 187);
 color: rgb(206, 206, 206);
 margin-top: .5rem;
}
.taichu{
    width: 18rem;
    height: 7.5rem;
    background-color: #fff;
    border-radius: .5rem;
}
.up{
    height: 4rem;
    text-align: center;
  
    line-height: 4rem;
}
ul{
    display: flex;
    height: 3.5rem;
}
li{
    width: 50%;
    text-align: center;
    line-height: 3.5rem;

}
</style>